<template>
  <div class="index">
    <!-- 顶部栏 -->
    <div class="header">
      <div class="logo">
        <span class="iconfont iconnew"></span>
      </div>
      <div class="search"
           @click="$router.push({name:'search'})">
        <van-icon name="search" />
        <span>搜索商品</span>
      </div>
      <div class="user"
           @click="$router.push({path:`/personal/${id}`})">
        <van-icon name="manager-o" />
      </div>
    </div>
    <!-- 标签页 -->
    <!-- active就代表当前默认选中的标签项：那么我们就应该加载这个选项的新闻数据 -->
    <van-tabs v-model="active"
              swipeable
              sticky>
      <!-- 生成栏目列表 -->
      <van-tab v-for="value in catelist"
               :key='value.id'
               :title="value.name">
        <!-- 添加这个栏目的下拉组件 -->
        <van-list v-model="value.loading"
                  :finished="value.finished"
                  finished-text="没有更多了"
                  @load="onLoad"
                  :immediate-check='false'
                  :offset='20'>
          <van-pull-refresh v-model="value.isLoading"
                            @refresh="onRefresh">
            <!-- 生成这个栏目的新闻列表 -->
            <articleblock v-for='item in value.postlist'
                          :key='item.id'
                          :post='item'></articleblock>
          </van-pull-refresh>
        </van-list>
      </van-tab>
    </van-tabs>

  </div>
</template>

<script>
import { getCateList } from '@/apis/category.js'
import { getPostList } from '@/apis/post.js'
import articleblock from '@/components/articleBlock.vue'
export default {
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    console.log('再见哦，，');
    next()
  },
  components: {
    articleblock
  },
  data () {
    return {
      id: JSON.parse(localStorage.getItem('toutiao_59_userinfo')).id,// 用户id
      catelist: [],
      // 设置标签项的默认选中项，根据用户的登陆状态进行判断
      active: localStorage.getItem('toutiao_59_token') ? 1 : 0
    }
  },
  async activated () {
    document.querySelector('.van-sticky').onclick = (e) => {
      console.log(e.target.className);
      if (e.target.className == 'van-sticky') { // 说明单击的位置是伪元素的位置 ---入口
        this.$router.push({ name: 'cateManager' })
      }
    }

    // 判断是否有本地存储，如果有获取出来
    this.catelist = JSON.parse(localStorage.getItem('heimatoutiao_add_cate_59'))
    // 实现栏目数据的动态渲染
    if (!this.catelist) {
      let res = await getCateList() // await:说明一定要执行完当前操作,才会继续下一步
      console.log(res);
      this.catelist = res.data.data
    } else { // 如果本地存储中有数据，获取的本地存储中并没有关注或头条，我们需要手动添加
      // 判断是否登陆
      if (localStorage.getItem('toutiao_59_token')) { // 已登陆，加关注和头条
        this.catelist.unshift({ id: 0, name: '关注', is_top: 1 }, { id: 999, name: '头条', is_top: 1 })
      } else {
        this.catelist.unshift({ id: 999, name: '头条', is_top: 1 })
      }
    }


    // 数据改造:每个栏目有属于自己的新闻数据,且能找到的操作互不干扰,当前栏目数据结构不能满足这个需求
    // map:可以对数组进行遍历，执行回函数，将回调函数的返回值存储到内部创建的数组，最终将数组返回
    this.catelist = this.catelist.map(v => {
      return {
        ...v,
        postlist: [], // 添加了存储这个栏目新闻数据的数组
        pageIndex: 1, // 当前栏目的页码
        pageSize: 4, // 当前栏目每页显示的数量
        loading: false,// 当前栏目的上拉加载的状态，为true说明下在加载中
        finished: false, // 当前栏目数据是否全部加载完毕，为true说明没有更多数据了
        isLoading: false // 当前栏目的下拉刷新的状态，True表示正在下拉刷新，刷新完成后要将这个重置为false
      }
    })
    this.init()
  },
  watch: {
    active () {
      if (this.catelist[this.active].postlist.length == 0) {
        this.init()
      }
    }
  },
  methods: {
    // 下拉刷新
    onRefresh () {
      console.log(321);
      this.catelist[this.active].postlist.length = 0 // 清空数据
      this.catelist[this.active].pageIndex = 1 // 重置页码到1
      // 不管之前是否还有数据，将可能被重置的finished重置为false,否则如果之前用户已经加载完所有数据，finished为true,会造成下拉刷新之后用户不能再上拉加载更多数据了
      this.catelist[this.active].finished = false
      // setTimeout(() => {
      this.init()
      // }, 2000);
    },
    // 上拉加载更多数据
    onLoad () {
      // 修改当前栏目的页码值
      this.catelist[this.active].pageIndex++
      // 为了看到效果而添加的延迟
      // setTimeout(() => {
      // 加载下一页
      this.init()
      // }, 2000);
    },
    async init () {
      // 获取当前栏目的新闻数据并渲染
      let res2 = await getPostList({
        category: this.catelist[this.active].id,
        pageIndex: this.catelist[this.active].pageIndex, // 获取当前栏目中的页码
        pageSize: this.catelist[this.active].pageSize // 获取当前栏目中的每页显示的数量
      })
      console.log(res2);
      // 将获取数据存储（追加）到当前栏目的postlist数组中
      this.catelist[this.active].postlist.push(...res2.data.data)
      console.log(this.catelist[this.active].postlist); // id,name is_top postlist
      // 本次加载结束，将loading重置为False,以便下次上拉
      this.catelist[this.active].loading = false
      // 如果没有数据了，就将finished重置为true
      if (res2.data.data.length < this.catelist[this.active].pageSize) {
        this.catelist[this.active].finished = true
      }
      // 重置下拉刷新的状态 
      this.catelist[this.active].isLoading = false
    }
  }
}
</script>

<style lang="less" scoped>
.index {
  .header {
    height: 40px;
    display: flex;
    justify-content: space-between;
    background-color: #f00;
    align-items: center;
    color: #fff;
  }
  .search {
    flex: 1;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 15px;
    text-align: center;
    line-height: 30px;
    .van-icon {
      font-size: 16px;
    }
  }
  .van-icon {
    font-size: 24px;
    padding: 0 10px;
  }
  .iconfont {
    font-size: 50px;
    padding: 0 10px;
  }
}
/deep/ .van-sticky {
  padding-right: 50px;
  // 伪元素从效果上看，相当于子元素
  // 它的是本质是一个样式块，它是一行级元素，如果需要设置宽高，则必须修改为块级元素
  // display:block   position    float
  // 一定要设置content,否则不渲染
  &::after {
    content: "+";
    position: absolute;
    width: 51px;
    height: 44px;
    background-color: #fff;
    top: 0;
    right: 0;
    text-align: center;
    line-height: 42px;
    font-size: 35px;
  }
}
</style>